/*
 * @Author: yangrongxin
 * @Date: 2021-04-28 09:29:33
 * @LastEditors: yangrongxin
 * @LastEditTime: 2021-09-17 09:42:50
 */
import React, { useState, useEffect } from 'react';
import { View, ScrollView, Text, Image, Button } from '@tarojs/components';
import Taro, { useRouter, useShareAppMessage } from '@tarojs/taro';
import '@tarojs/taro/html.css';
import { MEDIA_TYPE } from '@/const/dataDictionary';
import { AtIcon } from 'taro-ui';
import { loginWithFn } from '@/utils/common';
import { LikeComponent } from '@/components/index';
import { addFavorite } from '@/pages/AssessmentDetail/service';
import { deleteFavorite } from '@/pages/My/compoents/MyFavorite/service';
import { getArticleDetail } from '../../service';
import styles from './index.module.less';

// 设置小程序中图片高度自适应
Taro.options.html.transformElement = (el) => {
  if (el.nodeName === 'image') {
    el.setAttribute('mode', 'widthFix');
  }
  return el;
};

interface IArticleContentProps {}

// TODO: 详情页面可能需要进行改造 会从阿里云OSS中读取对应的详情信息
const ArticleContent: React.FC<IArticleContentProps> = (props) => {
  const {
    params: { articleId }, // 当前文章的id
  } = useRouter();

  // articleContent 中包含 标题 副标题 内容 阅读次数 等数据
  const [articleContent, setArticleContent] = useState<any>({});

  const {
    title,
    subhead,
    content,
    readCount,
    likeCount: propsLikeCount,
    authorPortrait,
    like,
    authorName,
    publishTime,
    collect, // 当前文章的收藏状态
  } = articleContent;

  const [likeCount, upLikeCount] = useState<number>(propsLikeCount);

  const [isCollect, setIsCollect] = useState<boolean>(false);

  useEffect(() => {
    if (!articleContent.title) {
      getArticleDetail({
        articleId,
      }).then((res: any) => {
        if (res?.articleId) {
          const resContent = res;
          setIsCollect(res.collect);
          setArticleContent(resContent);
        }
        Taro.hideToast();
      });
    }
    if (likeCount !== propsLikeCount) {
      upLikeCount(propsLikeCount);
    }
  }, [propsLikeCount]);

  useShareAppMessage(() => {
    return {
      title,
      path: `/pages/PatientEducation/components/ArticleContent/index?articleId=${articleId}`,
    };
  });

  const { safeArea, screenHeight } = Taro.getSystemInfoSync();

  const safeTop = safeArea?.top;
  const safeBottom = screenHeight - safeArea.bottom;

  /* 切换当前的收藏状态 */
  const changeCollect = () => {
    loginWithFn(() => {
      // 判断登录之后进行收藏和取消收藏
      let requestFn = addFavorite;
      let params: any = {
        objectId: articleId,
        type: MEDIA_TYPE.WENZHANG, // 1 测评 2 宣教
      };
      if (isCollect) {
        requestFn = deleteFavorite;
        params = {
          objectIds: [articleId],
          type: MEDIA_TYPE.WENZHANG,
        };
      }
      requestFn(params).then((res: any) => {
        setIsCollect(!isCollect);
        console.log('favorite', res);
      });
    });
  };

  return (
    <View className={styles.container}>
      <View className={styles.title}>
        <Text>{title}</Text>
      </View>
      <View className={styles.content}>
        <View>
          <View>
            <Text>{authorName || '华护通'}</Text>
            <Text>华心通官方认证</Text>
          </View>
          {/* 展示收藏的按钮 */}
          <View onClick={changeCollect}>
            <AtIcon prefixClass="icon" value={!isCollect ? 'fabulous1' : 'fabulous-fill'} color="#866DD8" />
            <Text className={!isCollect ? styles.unCollect : ''}>{isCollect ? '已收藏' : '收藏'}</Text>
          </View>
        </View>
        <ScrollView
          scrollY
          scrollWithAnimation
          className={styles.contentInline}
          style={{
            paddingBottom: `${safeBottom + 140}rpx`,
            marginTop: '4rpx',
            backgroundColor: '#fff',
          }}
        >
          <View
            className={`${styles.contentInlineWapper} braft-output-content taro_html`}
            dangerouslySetInnerHTML={{ __html: content }}
          />
        </ScrollView>
      </View>
    </View>
  );
};

export default ArticleContent;
